<template>
  <div style="width:100%;">
    <div class="page-title">
      <h2>Tiktok达人带货 行业市占率第一</h2>
      <span>购买会员套餐，享29.9美金一口价视频拍摄服务</span>
    </div>

    <div class="vipList">
      <!--@click="createOrder(item)"-->
      <div class="vip-item" v-for="(item,index) in pageList" :key="index">
        <!--{{item}}-->
        <img :src="item.cover_pic" alt="vip">
        <h3>{{item.name}}</h3>
        <div class="vip-item-price">
          套餐价格
          <span>{{item.price}} </span>
           USD
        </div>
        <div class="vip-item-num">
          套餐可拍摄视频
          <span>{{item.give_integral}}</span>
          条
        </div>

        <el-button @click="createOrder(item)" class="pay-box-btn" round>立即购买</el-button>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import Https from "@/server";
import {onMounted,ref} from "vue";
import {useRouter} from "vue-router";
const Router = useRouter();
const pageList = ref([
  {cover_pic: "",name: "",give_integral: 0,price: 0}
])

const packageList = () => {
  Https.getPackageList().then((res:any) => {
    // console.log(res);
    pageList.value = res.data.list;
  })
}

const createOrder = (params: any) => {
  let goods = {goods: params, num: 1,shop_type: 2};
  sessionStorage.setItem("orderData", JSON.stringify([goods]))
  Router.push({name: "create"});
}

onMounted(()=>{
  packageList()
})
</script>
<style scoped lang="scss">
.page-title{
  width: 1100px;
  margin: 0 auto;

  h2{
    //margin-top: 150px;
    margin-bottom: 16px;
    height: 78px;
    font-weight: 600;
    font-size: 56px;
    color: #fff;
    line-height: 78px;
    text-shadow: 0 6px 10px rgba(156, 174, 185, .3);
    text-align: left;
    font-style: normal;
    background: linear-gradient(180deg, #1e2937, #2a3a50);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  span{
    margin: 0;
    width: 506px;
    height: 33px;
    font-weight: 500;
    font-size: 24px;
    color: #7992af;
    line-height: 33px;
    text-align: left;
    font-style: normal;
    background: linear-gradient(90deg, #6489b5, #6282a9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  }
}

.vipList{
  width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 30px;



  .vip-item{
    width: 50%;
    --bgColor: linear-gradient(143deg, #fdfeff 0%, #ddeaf4 100%);
    --textColor: #252323;
    --vipColor: #f49351;
    background: var(--bgColor);
    padding: 75px 30px 20px;
    box-shadow: 0 12px 18px rgba(211, 219, 230, .5);
    border-radius: 16px;
    border: 1px solid #ffffff;
    position: relative;
    margin: 100px 0 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;

    img{
      width: 80px;
    }

    h3{
      font-weight: 600;
      font-size: 2.1rem;
      color: #f49351;
      margin-bottom: 13px;
    }

    .vip-item-price{
      color: #254974;
      span{
        font-size: 2.1rem;
      }
    }

    .vip-item-num{
      color: #254974;
      span{
        color: #f49351;
        font-size: 1.6rem;
      }
    }
  }
}

.pay-box-btn{
  margin: 30px auto 20px;
  width: 60%;
  height: 56px;
  border-radius: 28px;
  font-size: 1.3rem;
}

</style>